<template>
	<div style="padding: 50px 50px; height: 100vh">
		<yd-form ref="myForm" :options="formOptions" :model="formData" @form-init="onFormInit">
			<template #form-btn="props">
				<div style="display: flex; justify-content: center">
					<el-button class="yd-form-btn" type="primary" @click="onFormInit(props.model)">查询</el-button>
					<el-button class="yd-form-btn" type="primary" @click="onCustomColumnOpen">自定义列</el-button>
					<el-button class="yd-form-btn" type="warning">警告</el-button>
					<el-button class="yd-form-btn" type="danger">危险</el-button>
					<el-button class="yd-form-btn" type="info" disabled>信息</el-button>
				</div>
			</template>
		</yd-form>
		<Yd-table
			:form-data="formData"
			:table-data="tableData"
			:table-config="tableConfig"
			@rowClickHandler="onSearch"
			@sortChangeHandler="onSearch"
			@currentChangeHandler="onSearch"
			@selectionChangeHandler="onSelectionChange"
			@sizeChangeHandler="onSearch"
		>
		</Yd-table>
		<!-- 自定义列弹出层 -->
		<custom-column ref="customColumnRef" page-type="apmAlarm"></custom-column>
	</div>
</template>
<script lang="tsx" setup>
import ydForm from '@/components/YdForm/index.vue';
import YdTable from '@/components/YdTable/index.vue';
import CustomColumn from '@/components/CustomColumn/index.vue';
import { reactive, ref, onMounted, h } from 'vue';
import { queryBusinessOverviewListPage } from '@/api/test';
const formData = reactive<FormModelType>({
	systemId: ['5'],
});

const customColumnRef = ref<InstanceType<typeof CustomColumn>>();

const myForm = ref();
let formOptions = ref<FormOptionType>([
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		span: 7,
		dateType: 'datetimerange',
		shortcutsKeys: ['last1h', 'today', 'lastDay'],
		defaulShortcutsKey: 'last1h',
	},

	{
		type: 'select',
		label: '营业厅网台',
		prop: 'systemId',
		api: { name: 'queryAppSystemOptions', params: {} },
		attrs: {
			multiple: true,
		},
	},

	{
		type: 'select',
		label: '数据中心',
		prop: 'dataCenterList',
		selectKey: 'id',
		attrs: {
			multiple: true,
		},
		// cascaders: [
		// 	{
		// 		cascadersParams: 'areaCodeList',
		// 		api: {
		// 			params: [],
		// 			name: 'queryCityAreaOptions',
		// 		},
		// 	},
		// ],
		api: { name: 'queryDataCenter', params: {} },
	},
	{
		type: 'select',
		label: '归属城市',
		span: 6,
		prop: 'areaCodeList',
		selectKey: 'code',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
		// api: { name: 'queryBusinessBySystemId', params: {} },
	},
	{
		type: 'input',
		label: '业务名称',
		prop: 'username',
		attrs: {
			clearable: true,
		},
		rules: [
			{
				required: true,
				message: '用户名不能为空',
				trigger: 'blur',
			},
			{
				min: 2,
				max: 6,
				message: '用户名在2-6位置之间',
				trigger: 'blur',
			},
		],
	},
]);

let tableData = ref([]);
let tableConfig = reactive<TableConfigType>({
	// remote: queryBusinessOverviewListPage,
	enableSelection: true,
	columns: [
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '访问量',
			prop: 'visitCount',
			sortable: true,
		},
		{
			label: '完整访问量',
			prop: 'completeVisitCount',
			sortable: true,
		},
		{
			label: '平均处理时长',
			prop: 'avgResponseTime',
			sortable: true,
			formatter(row, val) {
				return val;
			},
		},
		{
			label: '告警访问量',
			prop: 'alarmVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'alarmVisitCount',
					color: '#ff9a0c',
					handler: (scope) => {
						const row = scope.row;
						let data = JSON.stringify({
							systemId: row.systemId,
							startTime: formData.startTime,
							endTime: formData.endTime,
							businessCodeList: [row.businessCode],
							isAlarm: 1,
						});
					},
				},
			],
		},
		{
			label: '失败访问量',
			prop: 'failVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					color: '#fe5578',

					rowKey: 'failVisitCount',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: formData.dataCenterList,
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
							dealState: 0,
						});
					},
				},
			],
		},
		{
			label: '成功访问量',
			prop: 'successVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'successVisitCount',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: formData.dataCenterList,
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
							dealState: 1,
						});
					},
				},
			],
		},
		{
			label: '成功率',
			prop: 'successRate',
			sortable: true,
			render() {
				let a = 12;
				let str = `<span>${a}</span>`;
				return h('sapn', { innerHTML: str });
			},
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '明细',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: formData.dataCenterList,
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
						});
					},
				},
			],
		},
	],
	pagination: {
		pageSize: 10,
		pageNum: 1,
		orderByColumn: 'visitCount',
		isAsc: 'desc',
		total: 0,
	},
	// 工具栏
	toolBar: [
		{
			name: '新增',
			icon: 'yd-icon-plus',
			permi: ['customAlarmConfig:add'],
			handler: () => {
				console.log('新增');
			},
		},
		{
			name: '修改',
			icon: 'yd-icon-edit',
			permi: ['customAlarmConfig:edit'],
			disable: 'single',
			handler: () => {
				console.log('修改');
			},
		},
		{
			name: '删除',
			icon: 'yd-icon-delete',
			permi: ['customAlarmConfig:delete'],
			disable: 'multiple',
			handler: () => {
				console.log('删除');
			},
		},
	],
});

const onFormInit = (e: any) => {
	formData.pageNum = 1;
	onSearch(e);
};

const onSearch = (e: any) => {
	queryBusinessOverviewListPage(formData).then((res: any) => {
		console.log(res);
		console.log(res.result.data);
		tableData.value = res.result.data;
		if (tableConfig.pagination) {
			tableConfig.pagination.total = res.result.total;
		}
	});
};

const onSelectionChange = (e: any) => {
	console.log('selectchange', e);
};

const onCustomColumnOpen = () => {
	// 打开自定义列
	customColumnRef.value?.handleOpen('bpm4.customField.businessAlarmList.apm', tableConfig.columns);
};

onMounted(() => {
	// 初始化自定义列
	customColumnRef.value?.useCustomColumn('bpm4.customField.businessAlarmList.apm', tableConfig.columns);
});
</script>
<style>
.test {
	/* --red: red; */
	--blue: blue;
	color: var(--red, var(--blue));
}
</style>
